<template>
    <el-dialog title="收货地址" :visible.sync="boxShow.isShow"
    @click="reset">
    <el-form :model="menuForm" ref="menuForm">
         <el-form-item label="上级菜单" :label-width="formLabelWidth">
            <el-select v-model="menuForm.pid" placeholder="顶级菜单">
                <el-option v-for="menu in menuList" 
                    :key="menu.id" 
                    :label="menu.title" 
                    :value="menu.id"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="菜单类型" :label-width="formLabelWidth">
            <template>
                <el-radio  v-model="menuForm.type" :label="1" v-if="menuForm.pid===0">目录</el-radio>
                <el-radio  v-model="menuForm.type" :label="1" v-else disabled>目录</el-radio>
                <el-radio  v-model="menuForm.type" :label="2">菜单</el-radio>
            </template>
        </el-form-item>
        <el-form-item label="菜单名称" :label-width="formLabelWidth">
            <el-input v-model="menuForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" :label-width="formLabelWidth" v-if="menuForm.type===1">
            <el-select v-model="menuForm.icon" placeholder="请选择目录图标">
                <el-option v-for="(icon, index) in iconList" 
                    :key="index" 
                    :value="icon">
                        <i :class="icon" style="font-size: 22px;"></i>
                    </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="菜单地址" :label-width="formLabelWidth" v-if="menuForm.type===2">
            <el-input v-model="menuForm.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单状态" :label-width="formLabelWidth">
            <template>
                <el-radio v-model="menuForm.status" :label="1" >启用</el-radio>
                <el-radio v-model="menuForm.status" :label="2" >禁用</el-radio>
            </template>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="reset">取 消</el-button>
        <el-button type="primary" @click ='submit'>确 定</el-button>
    </div>
    </el-dialog>
</template>

<script>
import { mapActions, mapState } from 'vuex'

export default {
    props: ['boxShow'],
    created() {
        console.log(this.menuList, "dialog menulist")
    },
    computed: {
        ...mapState('menus',['menuList'])
    },
    data() {
        return {
            iconList: [
                "el-icon-platform-eleme",
                "el-icon-eleme",
                "el-icon-delete-solid",
                "el-icon-delete",
                "el-icon-s-tools",
                "el-icon-setting",
                "el-icon-user-solid",
                "el-icon-user",
                "el-icon-phone",
                "el-icon-phone-outline",
                "el-icon-more",
                "el-icon-more-outline",
                "el-icon-star-on",
                "el-icon-star-off",
                "el-icon-s-goods",
                "el-icon-goods",
                "el-icon-warning",
                "el-icon-warning-outline",
                "el-icon-question",
                "el-icon-info",
                "el-icon-remove",
                "el-icon-circle-plus",
                "el-icon-success",
                "el-icon-error",
                "el-icon-zoom-in",
                "el-icon-zoom-out",
                "el-icon-remove-outline",
                "el-icon-circle-plus-outline",
                "el-icon-circle-check",
                "el-icon-circle-close",
                "el-icon-s-help",
                "el-icon-help",
                "el-icon-minus",
                "el-icon-plus",
                "el-icon-check",
                "el-icon-close",
                "el-icon-picture",
                "el-icon-picture-outline",
                "el-icon-picture-outline-round",
                "el-icon-upload",
                "el-icon-upload2",
                "el-icon-download",
                "el-icon-camera-solid",
                "el-icon-camera",
                "el-icon-video-camera-solid",
                "el-icon-video-camera",
                "el-icon-message-solid",
                "el-icon-bell",
                "el-icon-s-cooperation",
                "el-icon-s-order",
                "el-icon-s-platform",
                "el-icon-s-fold",
                "el-icon-s-unfold",
                "el-icon-s-operation",
                "el-icon-s-promotion",
                "el-icon-s-home",
                "el-icon-s-release",
                "el-icon-s-ticket",
                "el-icon-s-management",
                "el-icon-s-open",
                "el-icon-s-shop",
                "el-icon-s-marketing",
                "el-icon-s-flag",
                "el-icon-s-comment",
                "el-icon-s-finance",
                "el-icon-s-claim",
                "el-icon-s-custom",
                "el-icon-s-opportunity",
                "el-icon-s-data",
                "el-icon-s-check",
                "el-icon-s-grid",
                "el-icon-menu",
                "el-icon-share",
                "el-icon-d-caret",
                "el-icon-caret-left",
                "el-icon-caret-right",
                "el-icon-caret-bottom",
                "el-icon-caret-top",
                "el-icon-bottom-left",
                "el-icon-bottom-right",
                "el-icon-back",
                "el-icon-right",
                "el-icon-bottom",
                "el-icon-top",
                "el-icon-top-left",
                "el-icon-top-right",
                "el-icon-arrow-left",
                "el-icon-arrow-right",
                "el-icon-arrow-down",
                "el-icon-arrow-up",
                "el-icon-d-arrow-left",
                "el-icon-d-arrow-right",
                "el-icon-video-pause",
                "el-icon-video-play",
                "el-icon-refresh",
                "el-icon-refresh-right",
                "el-icon-refresh-left",
                "el-icon-finished",
                "el-icon-sort",
                "el-icon-sort-up",
                "el-icon-sort-down",
                "el-icon-rank",
                "el-icon-loading",
                "el-icon-view",
                "el-icon-c-scale-to-original",
                "el-icon-date",
                "el-icon-edit",
                "el-icon-edit-outline",
                "el-icon-folder",
                "el-icon-folder-opened",
                "el-icon-folder-add",
                "el-icon-folder-remove",
                "el-icon-folder-delete",
                "el-icon-folder-checked",
                "el-icon-tickets",
                "el-icon-document-remove",
                "el-icon-document-delete",
                "el-icon-document-copy",
                "el-icon-document-checked",
                "el-icon-document",
                "el-icon-document-add",
                "el-icon-printer",
                "el-icon-paperclip",
                "el-icon-takeaway-box",
                "el-icon-search",
                "el-icon-monitor",
                "el-icon-attract",
                "el-icon-mobile",
                "el-icon-scissors",
                "el-icon-umbrella",
                "el-icon-headset",
                "el-icon-brush",
                "el-icon-mouse",
                "el-icon-coordinate",
                "el-icon-magic-stick",
                "el-icon-reading",
                "el-icon-data-line",
                "el-icon-data-board",
                "el-icon-pie-chart",
                "el-icon-data-analysis",
                "el-icon-collection-tag",
                "el-icon-film",
                "el-icon-suitcase",
                "el-icon-suitcase-1",
                "el-icon-receiving",
                "el-icon-collection",
                "el-icon-files",
                "el-icon-notebook-1",
                "el-icon-notebook-2",
                "el-icon-toilet-paper",
                "el-icon-office-building",
                "el-icon-school",
                "el-icon-table-lamp",
                "el-icon-house",
                "el-icon-no-smoking",
                "el-icon-smoking",
                "el-icon-shopping-cart-full",
                "el-icon-shopping-cart-1",
                "el-icon-shopping-cart-2",
                "el-icon-shopping-bag-1",
                "el-icon-shopping-bag-2",
                "el-icon-sold-out",
                "el-icon-sell",
                "el-icon-present",
                "el-icon-box",
                "el-icon-bank-card",
                "el-icon-money",
                "el-icon-coin",
                "el-icon-wallet",
                "el-icon-discount",
                "el-icon-price-tag",
                "el-icon-news",
                "el-icon-guide",
                "el-icon-male",
                "el-icon-female",
                "el-icon-thumb",
                "el-icon-cpu",
                "el-icon-link",
                "el-icon-connection",
                "el-icon-open",
                "el-icon-turn-off",
                "el-icon-set-up",
                "el-icon-chat-round",
                "el-icon-chat-line-round",
                "el-icon-chat-square",
                "el-icon-chat-dot-round",
                "el-icon-chat-dot-square",
                "el-icon-chat-line-square",
                "el-icon-message",
                "el-icon-postcard",
                "el-icon-position",
                "el-icon-turn-off-microphone",
                "el-icon-microphone",
                "el-icon-close-notification",
                "el-icon-bangzhu",
                "el-icon-time",
                "el-icon-odometer",
                "el-icon-crop",
                "el-icon-aim",
                "el-icon-switch-button",
                "el-icon-full-screen",
                "el-icon-copy-document",
                "el-icon-mic",
                "el-icon-stopwatch",
                "el-icon-medal-1",
                "el-icon-medal",
                "el-icon-trophy",
                "el-icon-trophy-1",
                "el-icon-first-aid-kit",
                "el-icon-discover",
                "el-icon-place",
                "el-icon-location",
                "el-icon-location-outline",
                "el-icon-location-information",
                "el-icon-add-location",
                "el-icon-delete-location",
                "el-icon-map-location",
                "el-icon-alarm-clock",
                "el-icon-timer",
                "el-icon-watch-1",
                "el-icon-watch",
                "el-icon-lock",
                "el-icon-unlock",
                "el-icon-key",
                "el-icon-service",
                "el-icon-mobile-phone",
                "el-icon-bicycle",
                "el-icon-truck",
                "el-icon-ship",
                "el-icon-basketball",
                "el-icon-football",
                "el-icon-soccer",
                "el-icon-baseball",
                "el-icon-wind-power",
                "el-icon-light-rain",
                "el-icon-lightning",
                "el-icon-heavy-rain",
                "el-icon-sunrise",
                "el-icon-sunrise-1",
                "el-icon-sunset",
                "el-icon-sunny",
                "el-icon-cloudy",
                "el-icon-partly-cloudy",
                "el-icon-cloudy-and-sunny",
                "el-icon-moon",
                "el-icon-moon-night",
                "el-icon-dish",
                "el-icon-dish-1",
                "el-icon-food",
                "el-icon-chicken",
                "el-icon-fork-spoon",
                "el-icon-knife-fork",
                "el-icon-burger",
                "el-icon-tableware",
                "el-icon-sugar",
                "el-icon-dessert",
                "el-icon-ice-cream",
                "el-icon-hot-water",
                "el-icon-water-cup",
                "el-icon-coffee-cup",
                "el-icon-cold-drink",
                "el-icon-goblet",
                "el-icon-goblet-full",
                "el-icon-goblet-square",
                "el-icon-goblet-square-full",
                "el-icon-refrigerator",
                "el-icon-grape",
                "el-icon-watermelon",
                "el-icon-cherry",
                "el-icon-apple",
                "el-icon-pear",
                "el-icon-orange",
                "el-icon-coffee",
                "el-icon-ice-tea",
                "el-icon-ice-drink",
                "el-icon-milk-tea",
                "el-icon-potato-strips",
                "el-icon-lollipop",
                "el-icon-ice-cream-square",
                "el-icon-ice-cream-round"
            ],
            menuForm: {
                id: "",
                pid: "",
                title: "",
                icon: "",
                type: 1, // 1 目录 2菜单
                url: "",
                status: 1  // 1正常 2禁用
            },
            formLabelWidth: '120px'
        }
    },
    methods: {
        ...mapActions('menus',['addMenuActions','editMenuActions']),
        submit() {
            if(this.menuForm.id) {
                this.editMenuActions(this.menuForm)
            } else {
                this.addMenuActions(this.menuForm)
            }
            this.reset()
        },
        reset() {
            // 可以通过ref属性获取到表单元素，调用表单元素的resetFields()函数进行重置
            // 仅仅是ElementUI提供的用于快捷重置表单数据丶函数，可能会因为初始数据导致失效
            // this.$refs.menuForm.resetFields()
            this.menuForm= {
                 id: "",
                pid: "",
                title: "",
                icon: "",
                type: "", // 1 目录 2菜单
                url: "",  
                status: 1 // 1正常 2禁用
            },
            this.boxShow.isShow = false
        }
    }
}
</script>

<style scoped>
.el-main{
    text-align: left;
}
</style>